<!-- 课程打卡		Course -->
<template>
	<view class="pb20">



		<view class="" v-if="list != ''">
			<view class="punch-top">
				<u-tabs-swiper ref="tabs" :list="list" :current="current" :is-scroll="false" @change="change">
				</u-tabs-swiper>
			</view>
			<view class="punch-daka">
				<view class="w90 f b c">
					<view class="wd50 f d p_t_60">
						<text class="fs36 bold ellipsis-2">{{data.course_name}}</text>
						<text class="fs28 mt10">{{data.timestr}}</text>
					</view>
					<view @click="daka(data.id)" class=" punch-daka-lan dis-flex flex-align-center flex-center"
						v-if="data.sign_status == 1">
						<view class="center">
							<view class="fs32 white">上课打卡</view>
							<view class="fs20 white p_t_20">{{data.sign_time}}</view>
						</view>

					</view>
					<view @click="daka(data.id)" class=" punch-daka-lan  dis-flex flex-align-center flex-center"
						v-if="data.sign_status == 2">
						<view class="center">
							<view class="fs32 white">下课打卡</view>
							<view class="fs20 white p_t_20">{{data.endtime}}</view>
						</view>
					</view>
					<view class=" punch-daka-lan bg-999  dis-flex flex-align-center flex-center"
						v-if="data.sign_status == 3">
						<view class="center">
							<view class="fs32 white">课程完结</view>
						</view>
					</view>
				</view>
			</view>
			<view class="punch-buttom pb20" v-if="suo">
				<view class="w90" v-if="item.sb_info || item.xb_info" v-for="(item,index) in content" :key="idnex">
					<view class="pt20 pb10">
						<text class="punch-buttom-jin senter pl15 pr15  pt5 pb5">
							{{item.course_name}}
						</text>
					</view>

					<view class="f b c p_t_25" v-if="item.sb_info">
						<view class="vw15 f c">
							<text class="fs22 blue">{{item.sb_time}}</text>
							<view class="landian m_l_10"></view>
						</view>
						<view class="punch-buttom-boxy">
							<text class="fs24 hui ellipsis">{{item.sb_info}}</text>
						</view>
					</view>
					<view class="f b c p_t_25" v-if="item.xb_info">
						<view class="vw15 f c">
							<text class="fs22 blue">{{item.xb_time}}</text>
							<view class="landian m_l_10"></view>
						</view>
						<view class="punch-buttom-boxy">
							<text class="fs24 hui ellipsis">{{item.xb_info}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dis-flex flex-align-center flex-center" style="height: 1000rpx;" v-else>
			<u-empty text="暂无课程" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				data: [],
				content: [],
				suo: false
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '我要打卡'
			})
			this.init()
		},
		methods: {
			init() {
				this.$http.post(this.$config.UrlPostcourseSignInfo, {}).then((res) => {
					if (res.status == 1) {
						var data = res.data
						var shuju = []
						for (var i = 0; i < data.length; i++) {
							var arr = new Object()
							arr.name = data[i]['course_name']
							shuju.push(arr)
							//判断是否有打卡的记录
							if (data[i]['sb_info'] || data[i]['xb_info']) {
								this.suo = true
							}
						}
						this.content = data
						this.data = data[this.current]
						this.list = shuju
					}
				})
			},
			daka(id) {
				var json = {
					id: id
				}
				this.$http.post(this.$config.UrlPostcourseSign, json).then((res) => {
					if (res.status == 1) {
						this.$api.toast('打卡成功')
						this.init()
					} else {
						this.$api.toast(res.err)
					}
				})
			},
			change(e) {
				this.current = e
				this.init()
			}
		}
	}
</script>

<style scoped>
	.warps {
		/* height: 200vh; */
		overflow: hidden;
		background-color: #fff;
	}

	.punch-top {
		width: 750;
		height: 80rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
	}

	.punch-daka {
		width: 750rpx;
		height: 352rpx;
		opacity: 1;
		background: #f6f8fc;
		margin: 0 auto;
		overflow: hidden;
	}

	.punch-daka-lan {
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 80rpx;
	}

	.punch-buttom {
		width: 686rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.punch-buttom-jin {
		opacity: 1;
		background: #f5f5f5;
		border-radius: 200rpx;
	}

	.landian {
		width: 16rpx;
		height: 16rpx;
		opacity: 1;
		background: #ffffff;
		border: 1rpx solid #1f73f2;
		border-radius: 50%;
	}

	.punch-buttom-boxy {
		width: 502rpx;
		height: 82rpx;
		line-height: 82rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding-left: 24rpx;
	}
</style>
